<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .todo li {
            padding: 10px 0;
        }

        .finish li {
            color: #999;
            text-decoration: line-through;
        }

        .btn {
            margin-left: 10px;
            padding: 2px 8px;
        }
    </style>
</head>

<body>
    <input id="text" type="text">
    <button id="save">保存</button>
    <p>待完成</p>
    <ul class="todo">
    </ul>
    <hr>
    <p>已搞定</p>
    <ul class="finish" id="done">
    </ul>
    <script>
        // 待完成事项
        var todoList = [];
        // 已完成事项
        var doneList = [];
        // 用户的输入
        var things = ''
        // 声明一个变量，content1用来盛放字符串，字符串的内容决定了待办事项中的内容
        // content2是完成事项的内容
        var content1 = '';
        var content2 = '';
        // 待办事项的ul元素
        var todo = document.getElementsByClassName('todo')[0]
        // 1. 点击保存按钮时，获取用户输入的内容，赋值给things
        save.onclick = function () {
            // 判断输入框不为空
            if (text.value != false) {
                things = text.value;
                // 2. 添加到待完成事项中
                todoList.push(things);
                // 3. 根据数组的最新内容，循环更新ul
                updateTodo();
                // 输入框置为空
                text.value = '';
            }
        }
        // 删除已完成的事项
        function del(index) {
            // 2. 添加到已完成事项中
            doneList.push(todoList[index]);
            // 更新页面的数据
            updateDone()
            // splice函数的语法：arr.splice（删除的下标，删除的长度，替换的内容）
            todoList.splice(index, 1);
            updateTodo();
        }
        // 更新待办事项的ul
        function updateTodo() {
            // 每次点击按钮都清楚一下li元素，用本次循环生成的li字符串
            content1 = '';
            for (let index = 0; index < todoList.length; index++) {
                content1 += '<li>' +
                    todoList[index] +
                    "<button class='btn' onclick=del(" +
                    index +
                    ")>del</button></li>";
            }
            // 放到ul中 显示出来
            todo.innerHTML = content1;
        }
        // 更新完成事项的ul
        function updateDone() {
            content2 = '';
            for (let index = 0; index < doneList.length; index++) {
                content2 += '<li>' +
                    doneList[index] +
                    "</li>";
            }
            // 放到ul中 显示出来
            done.innerHTML = content2;
        }
    </script>
</body>

</html>